<template>
  <div>
    <div class="app_card mb-2 pt-4  pb-4">
      <div class="d-flex justify-content-between align-items-center">
        <div class="flex-grow-1">
          <el-radio-group class="radio_button" v-model="flvUrl" @change="switchVideo">
            <template v-for="(item, index) in windowsList1?.playUrlList">
              <el-radio-button v-if="item.flvUrl" :label="item.index">{{ item.title }}</el-radio-button>
            </template>
          </el-radio-group>
        </div>
        <div class="d-flex">
          <el-button type="text" @click="goBack"><el-icon>
              <ArrowLeft />
            </el-icon>返回</el-button>
        </div>
      </div>
    </div>
    <el-row :gutter="0">
      <el-col :xs="24" :sm="24" :md="16" :lg="18">
        <div class="app_card  pt-2  pb-5">
          <div style="height:calc(100vh - 280px);overflow-y: scroll;">
            <div class="text-15 my-3">
              {{ roomData?.building }}
              <template v-if="roomData?.building && (roomData?.room || roomData?.name)">-</template>
              {{ roomData?.room || roomData?.name }}
            </div>
            <el-row class="w100">
              <el-col :span="24">
                <FlvPlayer   ref="flvPlayerRef" id="video1"></FlvPlayer>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="6">
        <div class="app_card  pt-2  pb-5 ml-4 pt-4">
          <div style="height:calc(100vh - 280px);overflow-y: scroll;">
            <RoomJoin ref="roomJoinRef" @roomFetch="roomFetch" :roomData="roomData" :isBaoxiu='false'></RoomJoin>
            <el-card class="card_bg mt-3" shadow="never">
              <template #header>
                <div class="card-header">
                  <span class="text-14 text-white-50">课程信息</span>
                </div>
              </template>
              <div class="pb-3 text-14">课程名称:</div>
              <div class="pb-3 text-14">授课老师:</div>
            </el-card>

            <el-card class="card_bg mt-3" shadow="never">
              <template #header>
                <div class="card-header">
                  <span class="text-14 text-white-50">温湿度</span>
                </div>
              </template>
              <div class="pb-3 text-14">温度:{{ roomData?.temperature ? roomData?.temperature : '' }}℃ </div>
              <div class="pb-3 text-14">湿度:{{ roomData?.humidity ? roomData?.humidity : '' }}%</div>
              <div class="pb-3 text-14">PM2.5:{{ roomData?.pm25 ? roomData?.pm25 : '' }}μg</div>
            </el-card>

            <!-- src/assets/img/room/offline-tag.png -->
            <div class="pb-3 pt-3 text-14">
              <div>
                <img v-if="roomData?.online == 1" src="@/assets/img/room/online-tag.png" width="30" class="v-m" />
                <img v-else src="@/assets/img/room/offline-tag.png" width="30" class="v-m" />
                中控{{ roomData?.online == 1 ? '在线' : '离线' }}

              </div>

            </div>
          </div>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script setup>
/**
 * 教室详情
 */
import { onMounted, ref, onUnmounted, nextTick } from 'vue'
import { ElLoading } from 'element-plus'
import EsAjax from '@/utils/EsAjax';
import ApiUrls from '@/apis/index';
import useAuthStore from '@/stores/useAuthStore';
import { useRoute, useRouter } from 'vue-router'
import FlvPlayer from '@/components/flvPlayer/index.vue'
import { ElMessage } from 'element-plus'
import RoomJoin from './RoomJoin.vue';

const emit = defineEmits(['goClass']);
// 组件引用
const roomJoinRef = ref(null);

// ======================================================
//                      变量声明
// ======================================================
const authStore = useAuthStore();
const route = useRoute()
const routes = useRouter()
let { id = "", roomInfo = '' } = route.query;
console.log(route.query);
if (`${id}`) {
  nextTick(() => {
    fetch()
  })
}
// 数据
const dataOfTable = ref([]);
const queryForm = ref({
  page: 1,
})
// 表格查询参数
const queryParam = ref({
  id: id,
})

const flvPlayerRef = ref(null)


const flvPlayer = ref(null)
const loading = ref(false)
//视屏文件
const windowsLength = ref(null)
const windowsList1 = ref([])
const roomData = ref({ id: null })

const flvUrl = ref('');


onUnmounted(() => {
  // destory()
})

// ======================================================
//                      处理事件
// ======================================================

const goBack = () => {
  if (id) {
    routes.go(-1);
  } else {
    emit('goClass')

  }
  flvPlayerRef.value.destory()
}
const loadData = (row) => {
  flvPlayerRef.value.load('')
  if (row) {
    roomData.value = row
  }
  fetch()
}

const fetch = () => {
  let _roomData = localStorage.getItem("ROOM_DATA");
  if (_roomData) {
    roomData.value = JSON.parse(_roomData)
  }
  var id = roomData.value.id - 0
  getPlaywindows(id)
  roomJoinRef.value.getRoomJoinnum(id);
}
/**获取视屏流 */
const getPlaywindows = (id) => {
  const loadingInstance = ElLoading.service({ text: '查询中...' })
  EsAjax.post(ApiUrls.roomPlaywindows, { id: id }).then(res => {
    // res.data = {
    //   "code": 200,
    //   "msg": "ok",
    //   "data": {
    //     "windows": [
    //       {
    //         "group": 1,
    //         "playUrlList": [
    //           {
    //             "title": "老师通道",
    //             "flvUrl": "https://c-v.wtu.edu.cn/nmserv/10.176.242.1:19614/live/42010000111320000004/10973031/live.flv?account_token=dGltZT0yMDIzLTA2LTI1VDAzOjE0OjAzJmRldmljZWlkPTQyMDEwMDAwMTExMzIwMDAwMDA0JnVzZXJpZD1hZG1pbiZyb2xlaWQ9YWRtaW4maGFzaD05NTM4YjFlOTFlNzAxMGUy"
    //           }
    //         ]
    //       }
    //     ]
    //   }
    // }
    // console.log('data==',res.data)
    if (res.data.code != 200) {
      ElMessage.warning(res.data.data + res.data.msg);
      return;
    }
    let { data } = res.data
    let { windows = [] } = data
    // console.log('windows==', windows)
    windowsLength.value = windows.length;
    if (windows && windows.length) {

    }

    if (windows.length == 1) {
      windowsList1.value = windows[0];
      let _playUrlList = windowsList1.value?.playUrlList || []

      if (_playUrlList.length) {
        _playUrlList.forEach((play, index) => {
          play.index = index
          if (play.flvUrl && `${flvUrl.value}` == "") {
            flvUrl.value = index
            switchVideo(index)
          }
        });
      }
      // if (windowsList1.value?.playUrlList?.length) {
      //   for (let index = 0; index < windowsList1.value?.playUrlList.length; index++) {
      //     const element = windowsList1.value?.playUrlList[index];
      //     if (element.flvUrl) {
      //       flvUrl.value = element.flvUrl
      //       flvPlayerRef.value.load(flvUrl.value)
      //       break
      //     }
      //   }
      // }
    }
  }).catch(err => {
    ElMessage.error(err.message);
  }).finally(() => {
    loadingInstance.close()
  })
}

const switchVideo = (val) => {

  let _index = parseInt(val)
  let _flvUrl = windowsList1.value.playUrlList[_index].flvUrl

  console.log('_flvUrl===', _flvUrl)

  flvPlayerRef.value.load(_flvUrl)
}
defineExpose({
  loadData
})
</script>
<style lang="less" scoped>
:deep(.el-card__body) {
  padding: 15px;
}
</style>
  
<style>
.title {
  color: #303133;
}

.nav {
  color: #606266;
}

.el-radio-button--mini {
  padding: 0 !important;
}

.el-radio-button__inner {
  padding: 7px 10px !important;
}

/* switch按钮样式 */
.el-switch {
  display: inline-flex !important;
  justify-content: flex-end;
}

.switch .el-switch__label {
  position: absolute;
  display: none;
  color: #fff !important;
}

/*打开时文字位置设置*/
.switch .el-switch__label--right {
  z-index: 1;
}

/* 调整打开时文字的显示位子 */
.switch .el-switch__label--right span {
  height: 20px;
  margin-left: auto !important;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
}

/*关闭时文字位置设置*/
.switch .el-switch__label--left {
  z-index: 1;
}

/* 调整关闭时文字的显示位子 */
.switch .el-switch__label--left span {
  height: 20px;
  margin-left: auto !important;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
}

/*显示文字*/
.switch .el-switch__label.is-active {
  display: block;
}

/* 调整按钮的宽度 */
.switch.el-switch .el-switch__core,
.el-switch .el-switch__label {
  width: 70px !important;
  margin: 0;
}
</style>
<style lang="less" scoped>
.leftVideo {
  float: left;
  position: relative;
}

.rightVideo {
  float: right;
  position: relative;
}

.selectChang {
  margin-bottom: 20px;
  overflow: hidden;

  span {
    margin-right: 20px;
    margin-left: 20px;
  }

  span:first-child {
    margin-left: 0px;
  }
}

.saveBtn {
  margin-left: 20px;
}

.mytable {
  margin-top: 20px;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.time {
  font-size: 13px;
  float: left;
}

.bottom {
  // margin-top: 13px;
  line-height: 12px;
  overflow: hidden;
  width: 100%;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.chongData {
  width: 100%;
  overflow: hidden;
}

.totalClass {
  width: 100%;
}

.chongToday {
  overflow: hidden;
  width: 100%;
  height: 50px;
}

.chongTodayYuan {
  float: left;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  line-height: 30px;
  text-align: center;
  background: red;
}

.chongTodayNumber {
  float: left;
  line-height: 30px;
  margin-left: 3%;
}

.chongTodayClass {
  float: right;
  line-height: 30px;
}
</style>